<template>
	<view :class="$tm.vx.state().tmVuetify.black?'black bk':''">
		<tm-menubars title="轮播" color="bg-gradient-primary-lighten" :showback="true"></tm-menubars>
		<tm-swiper :autoplay="true" :height="500" dot-model="round" dot-direction="right" :indicator-dots="true" :list="list1"></tm-swiper>
		
		<view class="pa-12 text-size-s text-weight-b blue text ma-32 round-2" :class="$tm.vx.state().tmVuetify.black?'black bk':''">指示点类型,加两边偏移</view>
		<tm-swiper  :round="6" :margin="32"  :autoplay="true"  :indicator-dots="true" :list="list"></tm-swiper>
		<view class="pa-12 text-size-s text-weight-b blue text ma-32 round-2" :class="$tm.vx.state().tmVuetify.black?'black bk':''">3d轮播，可自己设置缩放大小。</view>
		
		<tm-swiper  :round="6" :ani3d="220"  :autoplay="true" dot-model="rect"  :indicator-dots="true" :list="list"></tm-swiper>
		<view class="pa-12 text-size-s text-weight-b blue text ma-32 round-2" :class="$tm.vx.state().tmVuetify.black?'black bk':''">3d轮播，可自己设置缩放大小。</view>
		
		<tm-swiper  :round="6" :ani3d="120"  :autoplay="true" dot-model="rect"  :indicator-dots="true" :list="list"></tm-swiper>
		<view class="pa-12 text-size-s text-weight-b blue text ma-32 round-2" :class="$tm.vx.state().tmVuetify.black?'black bk':''">内联，指示点类型，位置</view>
		
		<view class="ma-32  round-3 overflow">
			<tm-swiper :round="3" :height="300" :width="650" inline  color="red" :autoplay="true" dot-model="number"  :indicator-dots="true" :list="list"></tm-swiper>
		</view>
		<view class="ma-32   round-3 overflow">
			<tm-swiper :round="3" :height="300" :width="650"  inline :autoplay="true" dot-model="rect" :circular="true" dot-direction="right"  :indicator-dots="true" :list="list"></tm-swiper>
		</view>
		
		<view style="height: 50upx;"></view>
	</view>
</template>

<script>
	// https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4
	import tmFullView from "@/tm-vuetify/components/tm-fullView/tm-fullView.vue"
	import tmMenubars from "@/tm-vuetify/components/tm-menubars/tm-menubars.vue"
	import tmSheet from "@/tm-vuetify/components/tm-sheet/tm-sheet.vue"
	import tmSwiper from "@/tm-vuetify/components/tm-swiper/tm-swiper.vue"
	import tmRow from "@/tm-vuetify/components/tm-row/tm-row.vue"
	import tmCol from "@/tm-vuetify/components/tm-col/tm-col.vue"
	export default {
		components:{tmFullView,tmMenubars,tmSheet,tmSwiper,tmRow,tmCol},
		data() {
			return {
				color:['primary','red','blue'],
				list1:[
					
					'https://picsum.photos/800?jv=34',
					{
						src:'https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4',
						type:'video'
						
					},
					{
						src:'https://picsum.photos/800?jv=74',
						title:'哈哈，这是一个标题呦'
					},
					'https://picsum.photos/800?jv=3',
					'https://picsum.photos/800?jv=5'
				],
				list:[
					
					'https://picsum.photos/800?jv=34',
					{
						src:'https://picsum.photos/800?jv=74',
						title:'哈哈，这是一个标题呦'
					},
					'https://picsum.photos/800?jv=3',
					'https://picsum.photos/800?jv=5'
				]
			}
		},
		methods: {
			
		},
		mounted() {

		}
	}
</script>

<style>

</style>
